<template>
	<view>
		<view class="search-box">
		  <uni-search-bar :radius="100" @input="input" :focus="true" cancelButton="none" ></uni-search-bar>
		</view>
		<!-- 搜索结构列表渲染 -->
		<view class="sugg-list" v-if="searchList.length!==0">
		  <view class="sugg-item" v-for="(item, i) in searchList" :key="i" @click="goDetail(item.goods_id)">
		    <view class="goods-name">{{item.goods_name}}</view>
		    <uni-icons type="arrowright" size="16"></uni-icons>
		  </view>
		</view>
		<!-- 搜索历史 -->
		<view class="history-box" v-else>
		  <!-- 标题区域 -->
		  <view class="history-title">
		    <text>搜索历史</text>
		    <uni-icons type="trash" size="17" @click="deleteHistoryList"></uni-icons>
		  </view>
		  <!-- 列表区域 -->
		  <view class="history-list">
		    <uni-tag :text="item" v-for="(item, i) in historys" :key="i" @click="gotoGoodsList(item)"></uni-tag>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.historyList = uni.getStorageSync('historyList') || []
		},
		data() {
			return {
				// 关键词
				keyWord:'',
				searchList:[],
				timer:null,
				historyList: ['a', 'app', 'apple']
			};
		},
		methods:{
			input(e){
				if(e=='') this.searchList=[]
				this.keyWord = e.trim()
				clearTimeout(this.timer)
				this.timer = setTimeout(()=>{
					this.getSearchList()
				},500)
			},
			async	getSearchList(){
				// 判断输入是否是空字串
				if(this.keyWord=='') return uni.$showMsg('搜索关键字不能为空字符串')
				const {data:res} = await uni.$http.get('/api/public/v1/goods/qsearch',{query:this.keyWord})
				if(res.meta.status !==200) return uni.$showMsg()
				this.searchList = res.message
				if(this.searchList.length==0)uni.$showMsg('没有搜索到预期商品')
				this.savaKeyWord()
				console.log(res);
			},
			goDetail(goods_id){
				console.log('goods_id',goods_id);
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?goods_id='+goods_id
				})
			},
			// 搜索到建议结果之后就将关键字存入历史关键字
			savaKeyWord(){
				// this.historyList.push(this.keyWord)
				// 将关键词进行查重然后形成新数组
				const newList = new Set(this.historyList)
				newList.delete(this.keyWord)
				newList.add(this.keyWord)
				this.historyList = Array.from(newList)
				// 数据持久化
				uni.setStorageSync('historyList',this.historyList)
			},
			deleteHistoryList(){
				this.historyList = []
				uni.setStorageSync('historyList',[])
			},
			gotoGoodsList(keyWord) {
			  uni.navigateTo({
			    url: '/subpkg/goods_list/goods_list?query=' + keyWord
			  })
			}
		},
		// 使用计算属性
		computed:{
			historys(){
				return [...this.historyList].reverse()
			}
		}
	}
</script>

<style lang="scss">
.uni-searchbar {
  display: flex;
  flex-direction: row;
  position: relative;
  padding: 16rpx;
  background-color: #ff0000;
}
.search-box {
  position: sticky;
  top: 0;
  z-index: 999;
}
.sugg-list {
	background: #fff;
	padding: 0 8px;

  .sugg-item {
    font-size: 15px;
    padding: 13px 0;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .goods-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-right: 3px;
    }
  }
}
.history-box {
  padding: 0 5px;

  .history-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    font-size: 13px;
    border-bottom: 1px solid #efefef;
  }

  .history-list {
    display: flex;
    flex-wrap: wrap;

    .uni-tag {
	  background: rgba(0,0,0,.1);
	  border: none;
	  border-radius: 20px;
	  padding: 8px;
	  color: black;
      margin-top: 5px;
      margin-right: 10px;
    }
  }
}
</style>
